@each $size in $size-map {
  .pr-#{$size} {
    padding-right: #{$size}px;
  }

  .mr-#{$size} {
    margin-right: #{$size}px;
  }

  .pl-#{$size} {
    padding-left: #{$size}px;
  }

  .ml-#{$size} {
    margin-left: #{$size}px;
  }

  .pt-#{$size} {
    padding-top: #{$size}px;
  }

  .mt-#{$size} {
    margin-top: #{$size}px;
  }

  .pb-#{$size} {
    padding-bottom: #{$size}px;
  }

  .mb-#{$size} {
    margin-bottom: #{$size}px;
  }

  .mtb-#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }

  .ptb-#{$size} {
    padding-top: #{$size}px;
    padding-bottom: #{$size}px;
  }

  .plr-#{$size} {
    padding-left: #{$size}px;
    padding-right: #{$size}px;
  }

  .mlr-#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }

  .p-#{$size} {
    padding: #{$size}px;
  }

  .m-#{$size} {
    margin: #{$size}px;
  }
}

@each $size in $width-map {
  .w-#{$size} {
    width: #{$size}px;
    max-width: 100%;
  }

  .h-#{$size} {
    height: #{$size}px;
  }
}

@each $radius in $border-radius {
  .br-#{$radius} {
    border-radius: #{$radius}px;
  }
}

@each $len in $percent-map {
  .wp-#{$len} {
    width: $len * 1%;
  }

  .hp-#{$len} {
    height: $len * 1%;
  }
}

@each $size in $font-map {
  .fs-#{$size} {
    font-size: #{$size}px;
  }
}

@each $size in $font-weight-map {
  .fw-#{$size} {
    font-weight: #{$size};
  }
}